<template>
  <div class="maintenance-plan-form-page">
    <div class="form-container">
      <h2 class="form-title">计划信息</h2>
      
      <el-form 
        :model="form" 
        :rules="formRules"
        ref="maintenancePlanForm"
        label-width="120px" 
        class="plan-form"
      >
        <el-row :gutter="30">
          <!-- 左列 -->
          <el-col :span="12">
            <el-form-item label="设备名称:" prop="equipmentName">
              <el-select 
                v-model="form.equipmentName" 
                placeholder="请选择设备"
                style="width: 100%"
                filterable
              >
                <el-option 
                  v-for="equipment in equipmentList" 
                  :key="equipment.equipmentId" 
                  :label="equipment.equipmentName" 
                  :value="equipment.equipmentName"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="计划开始时间*:" prop="planStartTime">
              <el-date-picker
                v-model="form.planStartTime"
                type="date"
                placeholder="请选择计划开始时间"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
            
            <el-form-item label="保养项目*:" prop="maintenanceItem">
              <el-input 
                v-model="form.maintenanceItem" 
                placeholder="请输入保养项目"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
            
            <el-form-item label="保养级别*:" prop="maintenanceLevel">
              <el-select 
                v-model="form.maintenanceLevel" 
                placeholder="--请选择保养级别--"
                style="width: 100%"
              >
                <el-option 
                  v-for="level in maintenanceLevels" 
                  :key="level.value" 
                  :label="level.label" 
                  :value="level.value"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="备注:">
              <el-input
                v-model="form.remark"
                type="textarea"
                rows="3"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          
          <!-- 右列 -->
          <el-col :span="12">
            <el-form-item label="计划结束时间:">
              <el-date-picker
                v-model="form.planEndTime"
                type="date"
                placeholder="请选择时间"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
            
            <el-form-item label="预计费用:">
              <el-input 
                v-model="form.estimatedCost" 
                placeholder="请输入预计费用 (元)"
                type="number"
                min="0"
                step="0.01"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="负责人:">
              <el-input 
                v-model="form.responsiblePerson" 
                placeholder="请输入负责人"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <div class="form-footer">
        <el-button @click="cancelForm" size="medium">取消</el-button>
        <el-button type="primary" @click="submitForm" size="medium">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MaintenancePlanForm',
  data() {
    return {
      form: {
        equipmentName: '',
        planEndTime: '',
        planStartTime: '',
        estimatedCost: '',
        maintenanceItem: '',
        responsiblePerson: '',
        maintenanceLevel: '',
        remark: ''
      },
      
      // 保养级别选项
      maintenanceLevels: [
        { value: 1, label: '一级保养' },
        { value: 2, label: '二级保养' },
        { value: 3, label: '三级保养' }
      ],
      
      // 设备列表
      equipmentList: [
        { equipmentId: 'EQ001', equipmentName: '灭火器' },
        { equipmentId: 'EQ002', equipmentName: '消防栓' },
        { equipmentId: 'EQ003', equipmentName: '电梯' },
        { equipmentId: 'EQ004', equipmentName: '空调系统' },
        { equipmentId: 'EQ005', equipmentName: '发电机' }
      ],
      
      // 表单验证规则
      formRules: {
        equipmentName: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        planStartTime: [
          { required: true, message: '请选择计划开始时间', trigger: 'change' }
        ],
        maintenanceItem: [
          { required: true, message: '请输入保养项目', trigger: 'blur' },
          { min: 2, max: 100, message: '保养项目长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        maintenanceLevel: [
          { required: true, message: '请选择保养级别', trigger: 'change' }
        ]
      }
    }
  },
  
  methods: {
    // 提交表单
    async submitForm() {
      try {
        // 表单验证
        const valid = await this.$refs.maintenancePlanForm.validate()
        if (!valid) {
          return
        }
        
        // 验证计划结束时间不能早于开始时间
        if (this.form.planEndTime && this.form.planStartTime) {
          if (new Date(this.form.planEndTime) < new Date(this.form.planStartTime)) {
            this.$message.error('计划结束时间不能早于开始时间')
            return
          }
        }
        
        this.$message.success('保养计划创建成功')
        console.log('表单数据:', this.form)
        
        // 重置表单
        this.resetForm()
      } catch (error) {
        console.error('表单验证失败:', error)
      }
    },
    
    // 取消表单
    cancelForm() {
      this.$confirm('确定要取消吗？未保存的数据将丢失。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '继续编辑',
        type: 'warning'
      }).then(() => {
        this.resetForm()
      }).catch(() => {
        // 用户选择继续编辑，不做任何操作
      })
    },
    
    // 重置表单
    resetForm() {
      this.form = {
        equipmentName: '',
        planEndTime: '',
        planStartTime: '',
        estimatedCost: '',
        maintenanceItem: '',
        responsiblePerson: '',
        maintenanceLevel: '',
        remark: ''
      }
      this.$refs.maintenancePlanForm.clearValidate()
    }
  }
}
</script>

<style scoped>
.maintenance-plan-form-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.form-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 800px;
}

.form-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  text-align: left;
}

.plan-form .el-form-item {
  margin-bottom: 25px;
}

.plan-form .el-form-item__label {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.plan-form .el-input__inner,
.plan-form .el-textarea__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 10px 15px;
  font-size: 14px;
}

.plan-form .el-input__inner:focus,
.plan-form .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.plan-form .el-select .el-input__inner {
  padding-right: 30px;
}

.plan-form .el-date-editor .el-input__inner {
  padding-right: 30px;
}

.form-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.form-footer .el-button {
  min-width: 100px;
  margin: 0 15px;
}

.form-footer .el-button--primary {
  background-color: #67c23a;
  border-color: #67c23a;
}

.form-footer .el-button--primary:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.form-footer .el-button--default {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #606266;
}

.form-footer .el-button--default:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .maintenance-plan-form-page {
    padding: 20px 10px;
  }
  
  .form-container {
    padding: 20px;
  }
  
  .form-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .plan-form .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
